<template>
    <div class="service_menu">
        <div class="banner">
            <img src="../../static/img/img1.jpg" alt="" style="width:100%">
        </div>
        <div class="row cont" style="padding:40px 0px">
           <div class="col-md-3">
               <ul>
                   <li v-for="item in left_nav" :class="{active_s:item.active}">{{item.name}}</li>
               </ul>
           </div>
           <div class="col-md-9">
               <img src="../../static/img/img2.jpg" alt="">
           </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            left_nav:[
                {
                    name:'PCB设计',
                    active:true,
                    link:'/'
                },
                {
                    name:'元器件选型',
                    active:false,
                    link:'/'
                },
                {
                    name:'样板生产',
                    active:false,
                    link:'/'
                },
                {
                    name:'工业设计',
                    active:false,
                    link:'/'
                },
                {
                    name:'3D样品打印',
                    active:false,
                    link:'/'
                },
                {
                    name:'磨具生产设计',
                    active:false,
                    link:'/'
                }
            ]
        }
    }
}
</script>
<style scoped>
ul li{
    list-style: none;
    color: #5e5e5e;
    cursor: pointer;
    margin:10px 0px;
    border-bottom: 1px solid #e4e4e4;
    height:30px;
    font-size: 14px;
    padding-left: 10px;
}
.active_s{
    color: #60b3f5
}
</style>
